<!DOCTYPE html>
<html lang="en">
<head>
    <title> flask websocket</title>
    <script src="{{ url_for('static',filename='jquery.min.js') }}"></script>
    <script src="{{ url_for('static',filename='socket.io.min.js') }}"></script>
</head>
<body>
<div class="div">
    <a id="tttt"></a>
    <img id="image1" src="" alt="">
    <br/>
    <div>
        <button id="downimg">获取图片</button>
        <button id="takepic">拍照</button>
        <a href="/images">查看所有图片</a>

    </div>
    <br/>


    <script type="text/javascript">
        $(document).ready(function () {

            var socket = io.connect('http://' + document.domain + ':' + location.port);

            socket.on('connect', function () {
                socket.emit('check', {data: 'User Connected'})
            });

            socket.on('image', function (msg) {
                const image_element1 = document.getElementById('image1');
                image_element1.src = "data:image/jpeg;base64," + msg;
            });

            $("#takepic").bind("click", function () {
                socket.emit('takephoto', {data: 'User take photos'});
            });

            function downloadFile(content, fileName) { //下载base64图片
                var base64ToBlob = function (code) {
                    let parts = code.split(';base64,');
                    let contentType = parts[0].split(':')[1];
                    let raw = window.atob(parts[1]);
                    let rawLength = raw.length;
                    let uInt8Array = new Uint8Array(rawLength);
                    for (let i = 0; i < rawLength; ++i) {
                        uInt8Array[i] = raw.charCodeAt(i);
                    }
                    return new Blob([uInt8Array], {
                        type: contentType
                    });
                };
                let aLink = document.createElement('a');
                let blob = base64ToBlob(content); //new Blob([content]);
                let evt = document.createEvent("HTMLEvents");
                evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
                aLink.download = fileName;
                aLink.href = URL.createObjectURL(blob);
                aLink.click();
            }

            function downimg() {
                const image_element1 = document.getElementById('image1');

                downloadFile(image_element1.src, 'save.jpeg');
            }

            function takepic() {
                socket.emit('takephoto', {data: 'User take photos'});
            }


        })
    </script>

    <script>
        /**
         * 根据图片生成画布
         */
        function convertImageToCanvas(image) {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);
            return canvas;
        }

        /**
         * 下载图片
         */
        function down() {
            var sampleImage = document.getElementById("image1"),
                canvas = convertImageToCanvas(sampleImage);
            url = canvas.toDataURL("image/jpeg");//PNG格式
            //以下代码为下载此图片功能
            var triggerDownload = $("#tttt").attr("href", url).attr("download", "order-1111111111.jpeg");
            triggerDownload[0].click();
        }
    </script>
</div>
</body>
</html>
